<template>
  <view class="setOption">
    <!-- 顶部 -->
    <view class="top">
      <view class="back" @tap="toBack">
        <image src="../../images/circle/zuojiantou.png" mode="widthFix"></image>
      </view>
      <text class="title">设置</text>
      <text class="right-btn" @tap="save"></text>
    </view>
    <view class="option">
      <view class="item">
        <view class="item-left">隐藏手机号</view>
        <switch
          class="item-right"
          :checked="statu"
          color="#0F6EDE"
          @change="toShow"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statu: true,
    };
  },
  onLoad(options) {
    this.statu = options.isShow == 1 ? true : false;
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    toShow: function (e) {
      var isPrivate = e.target.value ? 1 : 0;
      let token = uni.getStorageSync("token");
      uni.showLoading({
        title: "",
      });
      this.request({
        url: "h5/personalSpace/setPrivatePhone",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        method: "POST",
        data: {
          isPrivate: isPrivate,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          uni.hideLoading();
        } else if (res.data.code == 401) {
          uni.showToast({
            title: "登录失效，请重新授权登录！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          // uni.showToast({
          // 	title: res.data.msg,
          // 	duration: 2000,
          // 	icon: "none",
          // });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.setOption {
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 106rpx;
    padding: 0 30rpx 0 30rpx;
    background: rgb(248, 248, 248);
    color: rgb(0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    .back {
      width: 60rpx;
      image {
        width: 40rpx;
        vertical-align: middle;
        display: inline-block;
      }
    }
    .title {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }
    .right-btn {
      width: 60rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: right;
      color: #0f6ede;
    }
  }
  .option {
    padding: 106rpx 36rpx 0;
    .item {
      border-bottom: 1px solid #eeeeee;
      display: flex;
      justify-content: space-between;
      padding: 31rpx 0;
      .item-left {
        font-size: 34rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #111111;
      }
      .item-right {
        transform: scale(0.78);
        // margin-right:-10rpx;
      }
    }
  }
}
</style>
